/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, TextArea, InputLine, CCell, Table, TableRow, TableBody, Cell, LineColumn, Input, TableHead,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {Each_ZdSetting, tabIBlistCb, useRaftTableViewer, useTableEditor} from "../../hook/useRepTableEditor";

const 保护效果选 = ['好', '较差'];
const config阴保=[['测试编号','n',90], ['管道保护电位(V)','P',70],['管内电流(A)','I',70],
    ['牺牲阳极输出电流(A)','x',70],['牺牲阳极开路电位(V)','V',70], ['保护效果','r',200,tabIBlistCb(保护效果选,1)] ] as Each_ZdSetting[];

const itemA阴极保: string[] = ['阴保表', '阴仪器名','阴仪器编','阴保备注',  '起始位','终止位'];
const itemExcl = ['起始位', '终止位'];
const exclSet = new Set(itemExcl);
export  const itemA阴保 = itemA阴极保.filter(item => !exclSet.has(item));

//起止位置 : 在资料审查中有2个字段， 可是‘资料审查’也不是必选的录入页啊，关联？[['起始位置', '起始位'],  [['终止位置', '终止位'],
export const CathodicProtect =
React.forwardRef((
    {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
) => {
    const {inp, setInp} = useItemInputControl({ref});
    const [getInpFilter] = useMeasureInpFilter(null, itemA阴极保,);
    const headview=<Text variant="h5">
      测试结果表
    </Text>;
    const [render阴保表]=useTableEditor({inp, setInp,  headview,
        config: config阴保, table: '阴保表',  maxRf:3 });
    return (
    <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                         alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        <Text variant="h6">起止位置：</Text>
        <LineColumn>
            <InputLine  label='起始位置' >
                <Input  value={inp?.起始位 ||''}
                        onChange={e => setInp({ ...inp, 起始位: e.currentTarget.value}) } />
            </InputLine>
            <InputLine  label='终止位置' >
                <Input  value={inp?.终止位 ||''}
                        onChange={e => setInp({ ...inp, 终止位: e.currentTarget.value}) } />
            </InputLine>
        </LineColumn>
        <Text variant="h6">检测依据：</Text>1、GB/T21448-2017 《埋地钢质管道阴极保护技术规范》<br/>
          2、其他相关标准
        <LineColumn>
            <InputLine  label='仪器名称' >
                <Input  value={inp?.阴仪器名 ||''}
                        onChange={e => setInp({ ...inp, 阴仪器名: e.currentTarget.value}) } />
            </InputLine>
            <InputLine  label='仪器编号' >
                <Input  value={inp?.阴仪器编 ||''}
                        onChange={e => setInp({ ...inp, 阴仪器编: e.currentTarget.value}) } />
            </InputLine>
        </LineColumn>
        {render阴保表}
        <Text variant="h5">备注：</Text>
        <TextArea  value={inp?.阴保备注 ||''} rows={6}
                   onChange={e => setInp({ ...inp, 阴保备注: e.currentTarget.value||undefined}) } />
        {children}
    </InspectRecordLayout>
    );
});

export const CathodicProtectVw= ({orc, rep,op} :{orc:any, rep:any,op?:boolean}
) => {
    const [renderRows, renderHead]=useRaftTableViewer(config阴保, orc?.阴保表,1,
        false, true, true);
    return <>
        <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}} }>
            <Text id='CathodicProtect' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>阴极保护有效性检测{op?'记录':'报告'}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["11%","48%","10%", "%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}}} tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'CathodicProtect'}>
                    <TableRow>
                        <CCell>管道名称</CCell><CCell colSpan={3}>{orc?.管道设备名}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>起止位置</CCell><CCell colSpan={3}>{orc?.起始位 || '／'}&nbsp; - &nbsp;{orc?.终止位 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检测依据</CCell><Cell colSpan={3}>1、GB/T21448-2017 《埋地钢质管道阴极保护技术规范》<br/>
                        2、其他相关标准</Cell>
                    </TableRow>
                    <TableRow>
                        <CCell>仪器名称</CCell><CCell>{orc?.阴仪器名 ?? '／'}</CCell>
                        <CCell>仪器编号</CCell><CCell>{orc?.阴仪器编 ?? '／'}</CCell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={ ["27%","13%","13%","13%","13%", "%"] } css={{borderCollapse: 'collapse'}} tight  miniw={800}>
            <TableHead>
                <RepLink rep={rep} tag={'CathodicProtect'}>
                    {renderHead}
                </RepLink>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'CathodicProtect'}>
                    {renderRows}
                </RepLink>
            </TableBody>
        </Table>
        <Table fixed={ ["15%", "%"] } css={{borderCollapse: 'collapse'}} tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'CathodicProtect'}>
                    <TableRow>
                        <Cell colSpan={2}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                            备注：<br/>
                            {orc.阴保备注 ?? '／'}</div></Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck cap={'检查'} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
